<template>
  <div class="top-banner">
    <div class="cheer-up" v-if="imgs.length==0">
      {{$t("TopBanner.ynlyxyjtqjxjy")}}
    </div>
    <transition name="fade">
      <Slider itemWidth="100%" itemHeight="4rem" :img-list="imgs"/>
    </transition>
  </div>
</template>

<script>
import Slider from "./Slider";

export default {
  name: 'TopBanner',
  components: {Slider},
  data () {
    return {
        imgs: [
        ],
    }
  },
    methods:{
        getData(){
            let url = this.$api_url.get_banner+"?page=task";
            this.$axios.get(url).then((res)=>{
                if(res.data.code === 0){
                    this.imgs = res.data.data;
                }
            })
        },
    },
    mounted() {
        setTimeout(()=>{
            this.getData();
        },1000);
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top-banner{
    height:4rem;
    width: 100%;
    top: 0;
    position: fixed;
    left: 0;
    z-index: 10;
  }
  .cheer-up{
    text-align: center;
    position: absolute;
    top:2rem;
    left:0;
    width:100%;
    color:#555;
  }
</style>
